<template>
  <div class="ordersubmit">
    <van-submit-bar
      :price="total * 100"
      button-text="提交订单"
      @submit="onSubmit"
    />
    <div class="address">
      <div class="addressBox">
        <div class="top">
          <button class="left">快递配送</button
          ><button class="right" @click="ziti">到店自提</button>
        </div>
        <div class="setAddress">
          <button @click="addAddress">设置收货地址</button>
          <van-icon @click="addAddress" name="arrow" />
        </div>
        <div class="line">
          <img src="http://47.115.51.185/h5/img/line.05bf1c84.jpg" />
        </div>
      </div>
    </div>
    <div class="orderGoods">
      <p class="total">共{{ num }}件商品</p>
      <ul v-if="cartInfo.length > 0" class="list">
        <li v-for="l in cartInfo" :key="l.id">
          <div class="box">
            <div class="img">
              <van-image fit="cover" :src="l.productInfo.image" />
            </div>
            <div class="right">
              <p class="title">{{ l.productInfo.store_name }}</p>
              <p class="attr">属性:{{ l.productInfo.attrInfo.suk }}</p>
              <div class="pri">
                <span>￥{{ l.productInfo.price }}</span>
                <i>X{{ l.cart_num }}</i>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "OrderSubmit",
  data() {
    return {
      total: 0,
      num: 0,
      cartInfo: []
    };
  },
  created() {
    console.log(this.$route.params.id);
    this.$axios({
      method: "post",
      url: "api/order/confirm",
      data: {
        cartId: this.$route.params.id
      }
    })
      .then(d => {
        this.$axios({
          method: "post",
          url: "api/order/computed/" + d.data.data.orderKey,
          data: {
            couponId: 0,
            payType: "yue",
            shipping_type: 1,
            useIntegral: 0
          }
        }).then(d => {
          console.log(d);
          this.total = d.data.data.result.pay_price;
        });
        return d.data.data.cartInfo;
      })
      .then(e => {
        this.cartInfo = e;
        e.forEach(v => {
          this.num += v.cart_num;
        });
      });
  },
  mounted() {},
  methods: {
    addAddress() {},
    ziti() {
      Toast.fail("暂无门店信息!");
    },
    onSubmit() {}
  }
};
</script>

<style lang="less" scoped>
.list {
  li {
    margin: 10px 0;
    border-top: 1px solid rgb(200, 200, 200);
    padding: 10px 0;
    .box {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      .img {
        width: 2rem;
        height: 2rem;
        margin-right: 0.2rem;
        .van-image {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        flex: 1;
        width: 100%;
        height: 2rem;
        .title {
          text-align: left;
          font-size: 0.35rem;
          font-weight: bold;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }
        .attr {
          text-align: left;
          margin: 0.2rem 0;
          font-size: 0.3rem;
          color: rgb(61, 61, 61);
        }
        .pri {
          display: flex;
          justify-content: space-between;
          align-items: center;
          span {
            font-size: 0.4rem;
            font-weight: bold;
            margin-right: 1rem;
          }
          .van-cell {
            width: auto;
            padding: 0;
          }
        }
      }
    }
  }
}
.orderGoods {
  padding: 3%;
  background: white;
  p {
    text-align: left;
    font-size: 0.4rem;
    font-weight: bold;
  }
}
.address {
  height: 3.5rem;
  background-image: linear-gradient(180deg, #e93323 0, #f5f5f5);
  display: flex;
  justify-content: center;
  align-items: center;

  .addressBox {
    border-radius: 10px;
    overflow: hidden;
    width: 94%;
    height: 3rem;
    background-color: white;
    position: relative;
    .setAddress {
      width: 86%;
      height: 2rem;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      button {
        border: none;
        background: white;
        font-size: 0.4rem;
        vertical-align: middle;
      }
      i {
        font-size: 0.4rem;
        vertical-align: middle;
      }
    }
    .line {
      position: absolute;
      bottom: -0.1rem;
    }
    .top {
      display: flex;
      button {
        width: 50%;
        height: 0.7rem;
        border: none;
        font-size: 0.35rem;
        color: rgb(252, 65, 65);
        &.right {
          background: rgb(247, 193, 189);
        }
      }
    }
  }
}
</style>
